<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#000" type="transparentFixed" title=" "></z-nav-bar>
		<!-- 轮播图区域 -->
		<u-swiper
				:list="list3.slice(0,3)"
				indicator
				indicatorMode="line"
				circular
				height="767rpx"
				indicatorStyle="left:30rpx;"
		></u-swiper>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="main">
			<view class="info-1 flex j-between align-item">
				<view class="info-1-left">
					<view class="info-1-left-top flex align-item">
						<view class="info-1-left-top-txt">
							{{ authenticationData.real_name || '' }}
						</view>
						<image class="icon1" :src="imgUrl + 'static/web/icon/icon_renzheng.png'" mode="" v-if="authenticationData.is_vip"></image>
						<image class="icon2" :src="imgUrl + 'static/web/icon/hn-icon.png'" mode="" v-if="uid"></image>
						<image class="icon2" :src="imgUrl + 'static/web/icon/aaaaa.png'" mode="" v-else></image>
					</view>
					<view class="info-1-left-bot">
						{{ authenticationData.age || '' }}岁 · {{ authenticationData.height || '' }}cm · {{ authenticationData.city || '' }}
					</view>
				</view>
				<view class="info-1-right flex align-item column" style="margin-left: 160rpx;" @click="goReport" v-if="uid">
					<image class="icon3" :src="imgUrl + 'static/web/icon/report.png'" mode=""></image>
					<view>
						举报
					</view>
				</view>
				<view class="info-1-right flex align-item column" @click="collection" v-if="uid">
					<image class="icon3" :src="imgUrl + 'static/web/icon/icon_xin.png'" mode="" v-if="authenticationData.is_collection"></image>
					<image class="icon3" :src="imgUrl + 'static/web/icon/icon_xins.png'" mode="" v-else></image>
					<view :class="authenticationData.is_collection == 1 ? 'info-1-right-tit' : '' ">
						收藏
					</view>
				</view>
				<!-- <view class="info-1-right flex align-item column"  @click="goPage" v-if="uid">
					<image class="icon3" :src="imgUrl + 'static/web/icon/4416f75272fb52490fecc145339ab61.png'" mode=""></image>
					<view>
						私信
					</view>
				</view> -->
			</view>
			
			<view class="main-c" v-if="uid">
				<view class="info-2" v-if="authenticationData.lova_declaration">
					<view class="info-2-tit">
						爱情宣言
					</view>
					<view class="info-2-con">
						{{ authenticationData.lova_declaration || '' }}
					</view>
				</view>
				
				<view class="info-3">
					<view class="info-tit">
						基本信息
					</view>
					<view class="info-con flex align-item">
						<view class="info-con-item flex align-item" v-if="authenticationData.age">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/age.png'" mode=""></image>
							<view class="info-con-item-key">
								年龄：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.age || '' }}岁
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.height">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/height.png'" mode=""></image>
							<view class="info-con-item-key">
								身高：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.height || '' }}CM
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.weight">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/weight.png'" mode=""></image>
							<view class="info-con-item-key">
								体重：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.weight || '' }}KG
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.education">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/xueli.png'" mode=""></image>
							<view class="info-con-item-key">
								学历：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.education || '' }}
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.income">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/shouru.png'" mode=""></image>
							<view class="info-con-item-key">
								收入：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.income || '' }}
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.city">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/zuobiao.png'" mode=""></image>
							<view class="info-con-item-key">
								坐标：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.city || '' }}
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.marital_status">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/hunkuang.png'" mode=""></image>
							<view class="info-con-item-key">
								婚况：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.marital_status || '' }}
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.occupation">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/zhiye.png'" mode=""></image>
							<view class="info-con-item-key">
								职业：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.occupation || '' }}
							</view>
						</view>
					</view>
					<view class="info-tit" v-if="authenticationData.family_status">
						家庭成员
					</view>
					<view class="lianxifangshi flex align-item" v-if="authenticationData.family_status">
						<view class="lixiangxin">
							{{ authenticationData.family_status || '' }}
						</view>
					</view>
					<view class="info-tit" v-show="authenticationData.purchase_status == '0' || authenticationData.vehicle_status == 1 || authenticationData.is_smoking == '0' || authenticationData.is_drink == '0'">
						标签
					</view>
					<view class="biaoqian-con flex ">
						<view class="biaoqian-item biaoqian-item-my" v-if="authenticationData.purchase_status == '0'">
							有房
						</view>
						<view class="biaoqian-item biaoqian-item-my" v-if="authenticationData.vehicle_status == 1">
							有车
						</view>
						<view class="biaoqian-item biaoqian-item-my" v-if="authenticationData.is_smoking == '0'">
							不抽烟
						</view>
						<view class="biaoqian-item biaoqian-item-my" v-if="authenticationData.is_drink == '0'">
							不喝酒
						</view>
					</view>
					<view class="info-tit" v-if="authenticationData.contact_type">
						联系方式
					</view>
					<view class="lianxifangshi flex align-item" v-if="authenticationData.contact_type">
						<view class="lianxifangshi-wx">
							{{ authenticationData.contact_type || '' }}：
						</view>
						<view class="lianxifangshi-num">
							{{ authenticationData.contact || '' }}
						</view>
						<image class="copy" :src="imgUrl + 'static/web/icon/copy.png'" mode="" @click="copyContact(authenticationData.contact)"></image>
					</view>
					
				</view>
				
				<view class="info-3" v-if="authenticationData.o_age || authenticationData.o_income">
					<view class="info-tit">
						择偶标准
					</view>
					<view class="info-con flex align-item">
						<view class="info-con-item flex align-item" v-if="authenticationData.o_age">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/age.png'" mode=""></image>
							<view class="info-con-item-key">
								年龄：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.o_age || '' }}岁
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.o_height">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/height.png'" mode=""></image>
							<view class="info-con-item-key">
								身高：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.o_height || '' }}CM
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.o_weight">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/weight.png'" mode=""></image>
							<view class="info-con-item-key">
								体重：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.o_weight || '' }}KG
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.o_education">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/xueli.png'" mode=""></image>
							<view class="info-con-item-key">
								学历：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.o_education || '' }}
							</view>
						</view>
						<view class="info-con-item flex align-item" v-if="authenticationData.o_income">
							<image class="info-con-item-icon" :src="imgUrl + 'static/web/icon/shouru.png'" mode=""></image>
							<view class="info-con-item-key">
								收入：
							</view>
							<view class="info-con-item-val">
								{{ authenticationData.o_income || '' }}
							</view>
						</view>
					</view>
					<view class="biaoqian-con flex">
						<view class="biaoqian-item biaoqian-item-zo" v-if="authenticationData.o_purchase_status === '0'">
							有房
						</view>
						<view class="biaoqian-item biaoqian-item-zo" v-if="authenticationData.o_vehicle_status === '1'">
							有车
						</view>
						<view class="biaoqian-item biaoqian-item-zo" v-if="authenticationData.o_is_smoking === '0'">
							不抽烟
						</view>
						<view class="biaoqian-item biaoqian-item-zo" v-if="authenticationData.o_is_drink === '0'">
							不喝酒
						</view>
					</view>
					<view class="lixiangxin-t" v-if="authenticationData.o_remarks">
						理想型
					</view>
					<view class="lixiangxin" v-if="authenticationData.o_remarks">
						{{ authenticationData.o_remarks || '' }}
					</view>
				</view>
				
				<view class="info-3" v-if="authenticationData.photos">
					<view class="info-tit">
						TA的相册
					</view>
					<view class="xaingce flex align-item">
						<view class="xaingce-item flex align-item" v-for="(item,index) in authenticationData.photos" :key="index" @click="previewImg">
							<image :src="item" mode="widthFix"></image>
						</view>	
					</view>
				</view>
				
			</view>
			<view class="main-f flex align-item" v-else>
				<view class="main-f-btn" @click="goLogin">
					查看更多信息
				</view>
			</view>
		</view>
		
		<view class="liwu flex align-item" v-if="uid">
			<image class="fu-btn" style="margin-right: 120rpx;" :src="imgUrl + 'static/web/icon/liwu-icon.png'" mode="" @click="giftShow"></image>
			<!-- <view class="liwu-tit" @click="giftShow">
				送礼物
			</view> -->
			<!-- 聊天 -->
			<image class="fu-btn" :src="imgUrl + 'static/web/icon/76b854f18240a883244455732651ebc.png'" @click="goPage" mode=""></image>
		</view>
		<!-- 弹出层 -->
		<u-overlay :show="show">
			<view class="tanchuceng">
				<view class="tanchuceng-head flex align-item j-between">
					<view class="balance flex align-item">
						<view class="balance-icon">
							<image :src="imgUrl + 'static/web/icon/612c0a7e34184f8bd41931f2aa963cc.png'" mode=""></image>
						</view>
						<view class="balance-tit">
							可用余额：
						</view>
						<view class="balance-num">
							{{ userInfoData.virtual_currency_balance || 0 }} 红心
						</view>
					</view>
					<view class="guanbi flex align-item" @click="show = false">
						关闭
						<image :src="imgUrl + 'static/web/icon/x.png'" mode=""></image>
					</view>
				</view>
				<view class="hua">
					<swiper class="swiper" indicator-dots="true" :display-multiple-items="giftDataLength" indicator-color="rgba(0, 0, 0, .1)" indicator-active-color="rgba(0, 0, 0, .1)">
						<swiper-item v-for="(items,i) in giftData" :key="i" @click="selectGift(items)">
							<view class="hua-item flex align-item column" :class="selectGiftData.id == items.id ? 'hua-item-on' : ''">
								<image class="hua-item-img" :src="items.image" mode=""></image>
								<view class="hua-item-name">
									{{ items.name }}
								</view>
								<view class="hua-item-price">
									{{ items.price }}红心
								</view>
							</view>
						</swiper-item>
						</swiper-item>
					</swiper>	
				</view>
				<view class="zengsong flex align-item j-between">
					<view class="zengsong-left flex align-item">
						<image class="zengsong-left-icon" :src="authenticationData.head_portrait" mode=""></image>
						送TA礼物
					</view>
					<view class="zengsong-right" @click="$u.throttle(give,1000)">
						赠送
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- 遮罩层 -->
		<u-overlay :show="vipShow" :opacity="0.7" @click="fanhui"></u-overlay>
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				uid: '', // 用户id
				userInfoData: [], // 存储用户数据
				imgUrl: this.$http.baseUrl, // 服务器域名
				list3: [], // 轮播图数据存储
				show: false, // 控制弹出层
				authenticationId: '', // 用户发布信息id
				authenticationData: [], // 用户信息存储
				giftData: [], // 存储礼物信息
				giftDataLength: 0,
				selectGiftData: [], // 存储选中礼物信息
				sGiftNum: 1, // 赠送的礼物数量
				vipShow: false, // 浏览次数是否已达上线
				a: '', // 数据位置 left或者right
				b: '', // 下标
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			// 获取信息详情
			getAuthenticationInfo(){
				let that = this
				that.$http.get('api/ZhAuthentication/view',{
					'authentication_id': that.authenticationId
				}).then(res => {
					if(res){
						that.authenticationData = res
						that.list3 = res.photos
					}
				});
			},
			// 预览图片
			previewImg(){
				uni.previewImage({
					urls: this.authenticationData.photos
				});
			},
			// 复制联系方式
			copyContact(con){
				uni.setClipboardData({
				    data: con,
				    success: function () {
				        
				    }
				});
			},
			// 查看更多去登陆
			goLogin(){
				var that = this
				if(!that.uid && !that.userInfoData['uid']){
					uni.showModal({
						title: '提示',
						content: '查看更多需要登陆授权，是否前往登录？',
						success(e) {
							if(e.confirm){
								that.judgeLogin(()=>{
									let userInfo = this.$store.state.userInfo;
									if(userInfo){
										that.uid = userInfo.uid
									}
								})
							}
						}
					})
				}else {
					uni.showModal({
						title: '温馨提示',
						content: '您的浏览次数已达上线，是否前往开通会员？',
						success:res=>{
							if(res.confirm){
								uni.navigateTo({
									url: '/pages/my/open_vip/open_vip'
								})
							}
							if(res.cancel){
								uni.navigateBack({
									
								})
							}
						}
					})
				}
				
			},
			// 打开赠送礼物弹窗
			giftShow(){
				let that = this
				if(!that.uid){
					uni.showToast({
					    title: '请前往授权登录',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1000);
				}else {
					that.show = true
				}
			},
			// 获取礼物信息
			getGiftData(){
				let that = this
				that.$http.get('api/Gift/index').then(res => {
					if(res){
						that.giftData = res.list
						that.giftDataLength = res.count > 3 ? 3 : res.count
					}
				});
			},
			// 选中礼物信息
			selectGift(item){
				this.selectGiftData = item
			},
			// 获取我的信息
			getMyInfo(){
				var that = this
				that.$http.get('api/Member/view').then(res=> {
					that.userInfoData = res
				})
			},
			// 赠送礼物
			give(){
				let that = this
				if(!that.uid){
					uni.showToast({
					    title: '请前往授权登录',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1000);
				}else{
					if(that.selectGiftData.length == 0){
						uni.showToast({
							title:'请选择礼物',
							icon:'none'
						})
						return false
					}
					if(parseInt(that.selectGiftData.price) > parseInt(that.userInfoData.virtual_currency_balance) ){
						uni.showModal({
							title: '温馨提示',
							content: '您的红心不足，是否前往充值？',
							success:res=>{
								if(res.confirm){
									uni.navigateTo({
										url: '/pages/my/recharge/recharge'
									})
								}
							}
						})
					}else{
						
						that.$http.post('api/ZhGiveGift/giveGift',{
							'gift_id':that.selectGiftData.id,
							'gift_num':that.sGiftNum,
							's_id': that.authenticationData.u_id,
							's_name': that.authenticationData.real_name
						}).then(res => {
							// that.selectGiftData = []
							that.getMyInfo()
							uni.showToast({
								title:'赠送成功',
								icon: 'none'
							})
						})
					}
				}
			},
			// 点击收藏/取消收藏
			collection(){
				var that = this
				if(!that.uid){
					uni.showToast({
					    title: '请前往授权登录',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1000);
				}else{
					that.$http.post('api/ZhCollection/clickCollection',{
						'marriage_seeking_id': that.authenticationData.authentication_id,
						'release_id': that.authenticationData.u_id
					}).then(res=> {
						uni.showToast({
							title: '成功',
							icon:'none'
						})
						that.getAuthenticationInfo()
						var pages = getCurrentPages(); //当前页面栈
						if (pages.length > 1) {  
						    var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象 
							console.log(beforePage.route,'页面栈')
							if(beforePage.route == 'pages/my/collection/collection'){
								beforePage.$vm.shuaxin(); //触发上一个页面中的shuaxin方法
							}else {
								var aa = that.a
								var bb = that.b
								beforePage.$vm.shuaxincopy(aa,bb); //触发上一个页面中的shuaxin方法
							}
						 }
					})
				}
			},
			// 浏览记录添加
			browseRecordAdd(){
				var that = this
				that.$http.post('api/ZhBrowseRecord/add',{
					'auth_id': that.authenticationId
				}).then(res=> {
					if(res && res.is == 0){
						// that.vipShow = true
						that.uid = ''
						// uni.showModal({
						// 	title: '温馨提示',
						// 	content: '您的浏览次数已达上线，是否前往开通会员？',
						// 	success:res=>{
						// 		if(res.confirm){
						// 			uni.navigateTo({
						// 				url: '/pages/my/open_vip/open_vip'
						// 			})
						// 		}
						// 		if(res.cancel){
						// 			uni.navigateBack({
										
						// 			})
						// 		}
						// 	}
						// })
					}
				})
			},
			// 返回
			fanhui(){
				uni.navigateBack({
					
				})
			},
			// 前往聊天页面
			goPage(){
				// 订阅消息
				// #ifdef MP-WEIXIN
				var that = this
				that.$http.get('api/SysSite/index').then(res=>{
					if(res){
						uni.requestSubscribeMessage({
						  tmplIds: [res.list[0].gift_template_id,res.list[0].chat_template_id],
						  success (res) {
							  console.log(res)
						  }
						})
					}
				})
				// #endif
				uni.navigateTo({
					url: '/pages/chat/chat?s_id=' + this.authenticationData.u_id
				})
			},
			// 前往举报页面
			goReport(){
				uni.navigateTo({
					url: '/pages/feedback/report/report?r_id=' + this.authenticationData.u_id
				})
			}
			
		},
		onLoad(e) {
			console.log(e)
			let userInfo = this.$store.state.userInfo;
			this.authenticationId = e.authentication_id
			this.a = e.a
			this.b = e.b
			if(userInfo.uid){
				this.uid = userInfo.uid
				this.getMyInfo()
				this.getGiftData()
				// if(userInfo.is_vip != '1'){
				// 	this.browseRecordAdd()
				// }
				this.browseRecordAdd()
			}
			this.getAuthenticationInfo()
		}
	}
</script>

<style lang="scss">
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.fu-btn {
	// position: fixed;
	// bottom: 108rpx;
	// right: 50%;
	// margin-right: -200rpx;
	width: 160rpx;
	height: 160rpx;
	image {
		width: 100%;
		height: 100%;
	}
}

.main {
	padding: 0 30rpx 260rpx;
	.info-1 {
		margin-top: 32rpx;
		.info-1-left {
			.info-1-left-top {
				margin-bottom: 24rpx;
				.info-1-left-top-txt {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #000013;
				}
				.icon1 {
					width: 28rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
				.icon2 {
					width: 37rpx;
					height: 37rpx;
					margin-left: 16rpx;
				}
			}
			.info-1-left-bot {
				font-size: 26rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #6A6A7E;
			}
		}
		.info-1-right {
			width: 120rpx;
			height: 120rpx;
			// background: #FFFFFF;
			box-shadow: 0rpx 2rpx 20rpx 0rpx #FFF5F8;
			border-radius: 60rpx;
			justify-content: center;
			font-size: 24rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #020202;
			.icon3 {
				width: 50rpx;
				height: 48rpx;
			}
			.info-1-right-tit {
				color: #FF87C9;
			}
		}
	}
	.main-c {
		.info-2 {
			width: 100%;
			height: 173rpx;
			background: linear-gradient(270deg, #FFFFFF 0%, #F3F0FF 100%);
			border-radius: 24rpx;
			margin-top: 32rpx;
			padding: 32rpx;
			.info-2-tit {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #1C1829;
				margin-bottom: 24rpx;
			}
			.info-2-con {
				font-size: 28rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #1C1829;
			}
		}
		.info-3 {
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 32rpx;
			.biaoqian-con {
				flex-wrap: wrap;
				margin-bottom: 31rpx;
				.biaoqian-item {
					width: 140rpx;
					height: 54rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					line-height: 54rpx;
					text-align: center;
					border-radius: 8rpx;
					margin: 0 23rpx 23rpx 0;
				}
				.biaoqian-item:nth-child(4n + 4){
					margin-right: 0;
				}
				.biaoqian-item-my {
					color: #7F5AFF;
					background: #F4F0FF;
				}
				.biaoqian-item-zo {
					background: #F9F9F9;
					color: #000013;
				}
			}
			.lianxifangshi {
				font-size: 28rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				.lianxifangshi-wx {
					color: #000013;
				}
				.lianxifangshi-num {
					color: #7F5AFF;
				}
				.copy {
					width: 24rpx;
					height: 24rpx;
					margin-left: 24rpx;
				}
			}
			.lixiangxin-t {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 300;
				color: #000013;
				margin-bottom: 24rpx;
			}
			.lixiangxin {
				background: #F9F9F9;
				border-radius: 24rpx;
				padding: 24rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #1C1829;
				line-height: 40rpx;
			}
			.xaingce {
				flex-wrap: wrap;
				.xaingce-item {
					width: 196rpx;
					height: 196rpx;
					border-radius: 30rpx;
					overflow: hidden;
					margin: 0 19rpx 19rpx 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.xaingce-item:nth-child(3n + 3){
					margin-right: 0;
				}
			}
		}
	}
	.main-f {
		justify-content: center;
		margin-top: 148rpx;
		.main-f-btn {
			width: 82%;
			height: 80rpx;
			background: #7F5AFF;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}
	
}
.liwu {
	position: fixed;
	bottom: 108rpx;
	width: 100%;
	justify-content: center;
	// left: 50%;
	// margin-left: -96rpx;
	// margin-left: -200rpx;
	// width: 192rpx;
	// height: 192rpx;
	// image {
	// 	width: 100%;
	// 	height: 100%;
	// }
	// .liwu-tit {
	// 	position: absolute;
	// 	bottom: 44rpx;
	// 	left: 60rpx;
	// 	font-size: 22rpx;
	// 	font-family: PingFangSC-Regular, PingFang SC;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// }
}
.info-tit {
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: #000013;
	margin-bottom: 24rpx;
}
.info-con {
	flex-wrap: wrap;
	justify-content: space-between;
	.info-con-item {
		width: 50%;
		font-size: 28rpx;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 400;
		color: #000013;
		margin-bottom: 32rpx;
		.info-con-item-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
}
.tanchuceng {
	position: fixed;
	width: 90%;
	bottom: 200rpx;
	left: 5%;
	padding: 30rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	.tanchuceng-head {
		margin-bottom: 36rpx;
		.guanbi {
			justify-content: flex-end;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #C1C8D5;
			
			image {
				width: 21rpx;
				height: 21rpx;
				margin-left: 16rpx;
			}
		}
		.balance {
			.balance-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.balance-tit {
				font-size: 28rpx;
				
			}
			.balance-num {
				color: #7F5AFF;
				font-size: 32rpx;
				font-size: 500;
			}
		}
	}
	.hua {
		// flex-wrap: wrap;
		.hua-item {
			
			padding: 20rpx 30rpx;
			border-radius: 24rpx;
			margin: 0 17rpx 20rpx 0;
			.hua-item-img {
				width: 130rpx;
				height: 130rpx;
			}
		}
		.hua-item-on {
			border: 1rpx solid #7F5AFF;
		}
		.hua-item:nth-child(3n + 3){
			margin-right: 0;
		}
	}
	.zengsong {
		margin-top: 60rpx;
		.zengsong-left {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000013;
			.zengsong-left-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.zengsong-right {
			width: 221rpx;
			height: 80rpx;
			background: #7F5AFF;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			z-index: 10;
		}
	}
}
</style>
